<template>
  <div class="bg-white set-navigation">
    <ContentWrap :show-border="false">
      <div class="set-navigation-con">
        <div class="add-set-navigation-btn pb-20px el-btn">
          <el-button color="#3366ff" type="primary" @click="addNavigation">
            <Icon icon="ep:plus" class="mr-2px" />
            新增导航
          </el-button>
          <!-- <el-button type="default" plain @click="$router.push({ name: 'AddSetNavigation' })">
            保存
          </el-button> -->
        </div>
        <div class="set-navigation-table">
          <el-table
            :data="tableData"
            default-expand-all
            :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#333' }"
            row-key="id"
          >
            <el-table-column prop="name" label="导航名称" />
            <el-table-column prop="type" label="关联类型">
              <template #default="{ row }">
                <span>{{ row.type == 1 ? '分类' : '商品' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="associatedContent" label="关联内容" />
            <el-table-column prop="associatedCount" label="关联商品数" />
            <el-table-column label="操作" width="240">
              <template #default="{ row }">
                <el-button
                  type="primary"
                  size="small"
                  color="#3721FF"
                  plain
                  link
                  @click="editNavigation(row)"
                >
                  编辑
                </el-button>
                <el-button link color="#3721FF" plain type="primary" size="small" @click="openPreview(row)"> 预览 </el-button>
                <!-- 判断如果是第三级就不显示这个按钮 -->
                <el-button
                  v-if="row.level < 2"
                  link
                  color="#3721FF"
                  plain
                  type="primary"
                  size="small"
                  @click="addNavigationChildren(row)"
                >
                  添加二级
                </el-button>
                <el-button
                  link
                  color="#3721FF"
                  plain
                  type="primary"
                  size="small"
                  @click="deleteNavigation(row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <Pagination
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </ContentWrap>
  </div>
  <AddNavigation
    v-if="isAddNavigation"
    :isAddNavigation="isAddNavigation"
    @close="isAddNavigation = false"
    :webSiteId="route.query.id"
    @rafresh="getList"
    :editSelectedId="editSelectedId"
    :editSelectedType="editSelectedType"
    :isAddChildren="isAddChildren"
    :parentId="parentId"
  />
  <!-- 正常删除弹窗 -->
  <ComfirmPops
    ref="deletePopsRef"
    :show-icon="true"
    width="500px"
    :show-dot="false"
    type="idTips"
    title="删除"
    :id="delSelected"
    @confirm="getDeletePops"
  >
    <template #content>
      <p>确定删除吗？</p>
    </template>
  </ComfirmPops>
</template>

<script setup lang="ts">
defineOptions({ name: 'SetNavigation' })
import AddNavigation from './addNavigation.vue'
import { WebSiteApi, WebSiteVO } from '@/api/website/website'
import { defaultProps, handleTree, treeToString } from '@/utils/tree'

const route = useRoute()
const isAddNavigation = ref(false)
const editSelectedId = ref('')
const editSelectedType = ref()
const delSelected = ref()
const deletePopsRef = ref()
const isAddChildren = ref(false)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  webSiteId: route.query.id as number
})
const total = ref(0)
const tableData = ref([])
//
const deleteNavigation = (id: number) => {
  delSelected.value = id
  deletePopsRef.value.show(id)
}
//
const getDeletePops = async (bool, id: number) => {
  await WebSiteApi.deleteWebNavigation(id).then((res) => {
    ElMessage.success('删除成功')
    getList()
  })
}
//预览
const openPreview = (row) => {
  window.open('https://'+ route.query.domain+ '#/index?id=' + row.id, '_blank')
  // 跳转到预览页面
}
const parentId = ref()
const addNavigationChildren = (row) => {
  isAddNavigation.value = true
  editSelectedId.value = row.id
  parentId.value = row.parentId
  editSelectedType.value = row.type
  // 是否添加二级
  isAddChildren.value = true
}
//
const editNavigation = (row: WebSiteVO) => {
  isAddNavigation.value = true
  isAddChildren.value = false
  editSelectedId.value = row.id
}
const addNavigation = () => {
  isAddNavigation.value = true
  editSelectedId.value = ''
}
const getList = async () => {
  await WebSiteApi.getWebNavigationPage(queryParams).then((res) => {
    tableData.value = handleTree(res.list)
    total.value = res.total
  })
}
onMounted(() => {
  getList()
})
</script>

<style scoped>
@import '@/styles/website.scss';
</style>
